<template>
  <div class="contents">
    <van-nav-bar title="智能核保助手" left-text="返回" fixed placeholder @click-left="anewClk" />
    <div class="header-timer">{{ taskNo }}</div>
    <div class="contain">
      <div class="countbox">
        <span>小智为您预测的核保结果如下。</span>
      </div>
      <div class="suggestbox" ref="suggestboxFlag">
        <!-- <p class="title">根据您提供的<span>{{baseContent.projectName}}</span>信息，初步判断：</p> -->
        <!-- <p class="title">{{gradedContent}}</p> -->
        <div class="contentbox">
          <p>
            <van-icon name="warning" color="#ffc541" size="20px" />
            <span class="result">&nbsp;&nbsp;&nbsp;核保预测结果：</span>
          </p>
          <p class="cenleft" v-for="(item,index) in underResultList" :key="index">{{item.productType}}，{{item.result}}</p>
        </div>
        <p class="end">注意：以上仅为AI核保预测结果，与最终核保结论可能存在偏差，请以正式投保的核保结论为准，感谢您的理解！</p>
        <div class="contentbox">
          <p>
            <van-icon @click="healthClk" name="add" color="#95f204" size="20px" />
            <span class="health" @click="healthClk">&nbsp;&nbsp;&nbsp;<span style="text-decoration: underline;">健康建议:</span></span>
          </p>
          <div class="helSuggest" v-if="healthFlag">
            <p>{{healthAdvice}}</p>
            <!-- <p>
              TI-RADS
              3级意味着甲状腺结节在超声检查中表现出一些不典型特征，但大多数是良性的，恶性风险低。
            </p>
            <p>以下是一些建议：</p>
            <p>
              1.定期复查：遵循医生的指导进行定期超声监测，通常可以在6-12个月后进行第一次复查，医生会根据结节是否有变化调整预防策略。
            </p>
            <p>
              2.注意症状变化：如果您感觉到颈部压迫感，吞咽困难，声音改变，或发现颈部肿块增大，请及时与医生联系。
            </p>
            <p>
              TI-RADS
              3级意味着甲状腺结节在超声检查中表现出一些不典型特征，但大多数是良性的，恶性风险低。
            </p>
            <p>
              TI-RADS
              3级意味着甲状腺结节在超声检查中表现出一些不典型特征，但大多数是良性的，恶性风险低。
            </p> -->
          </div>
        </div>
      </div>
    </div>
    <div class="heightFlag" ref="heightFlag" v-show="true"></div>
    <div class="btnbox" >
      <div class="btn1" ref="btnBoxFlag" @click="anewClk">重新评估</div>
      <div class="btn2" @click="quit">退出</div>
    </div>

    <!-- <div class="btn1" @click="anewClk">重新咨询</div>
    <div class="btn2">分享</div> -->
  </div>
</template>

<script>
import dayjs from "dayjs";
import camera from "@/assets/img/icon/camera.png";
import { underResultInfoApi } from "@/api/requestApi";
import robot from "@/assets/img/jqr.png"
import '@/api/photo_mainCtrl'
export default {
  name: "contents",
  components: {},
  data() {
    return {
      distanceHeoght:'',
      taskNo:"",
      timer: dayjs().format("YYYYMMDD"),
      imgSrc: camera,
      isShow: true,
      show: false,
      baseContent: {},
      healthFlag: true,
      healthAdvice:"",
      underResultList:[],
      gradedContent:"",
    };
  },
  created(){
    this.taskNo = sessionStorage.getItem('taskNo');
    this.getUnderResultInfoApiFn();
    this.clearTimer = setInterval(() => {
      this.nowDate();
    }, 1000);
  },
  mounted() {
      this.calculateDistance();
  },
  methods: {
    calculateDistance() {
      const suggestBox = this.$refs.heightFlag;
      const btnBox = this.$refs.btnBoxFlag;
      const suggestboxFlag = this.$refs.suggestboxFlag;
      if (suggestBox && btnBox && suggestboxFlag) {
        const suggestBoxRect = suggestBox.getBoundingClientRect();
        const btnBoxRect = btnBox.getBoundingClientRect();
        // 计算垂直距离，并取绝对值
        const distance = Math.abs(suggestBoxRect.top - btnBoxRect.bottom); // 注意这里是bottom，假设你想从btnBox的底部计算到suggestBox的顶部
        // 获取suggestboxFlag的当前高度
        let currentHeight = suggestboxFlag.offsetHeight; // 这是元素的原始高度
        // 计算新高度：原始高度 + distance
        let newHeight = currentHeight + distance - 130;
        this.distanceHeoght = distance
        // 设置suggestboxFlag的新高度
        suggestboxFlag.style.height = `${newHeight}px`;
      }
    },
    nowDate() {
      this.timer = dayjs().format("YYYYMMDD");
    },
    getUnderResultInfoApiFn(){
      underResultInfoApi(this.taskNo).then((res) => {
        this.$store.commit('loading/SET_LOADING',false);
        if (res.data.resultCode == 0) {
          let {healthAdvice, gradedContent, underResult} = res.data.data;
          this.underResultList = underResult;
          this.healthAdvice = healthAdvice;
          this.gradedContent = gradedContent;
        }
      }).catch((err) => {
          this.$toast(res.data.resultMsg || "失败");
          this.$store.commit('loading/SET_LOADING',false);
      });
    },

    healthClk() {
      this.healthFlag = !this.healthFlag;
    },
    onClickLeft() {
      this.$router.go(-1);
    },

    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },

    cameraClk() {},

    anewClk() {
      console.log('removeItem("orcParam");')
      sessionStorage.removeItem("orcParam");
      sessionStorage.removeItem("baseData");
      sessionStorage.removeItem("baseContent");
      this.$router.push({ path: "/consult" });
    },

    redactClk() {
      this.$toast("编辑");
    },
    delClk() {
      this.$toast("删除");
    },

    quit() {
      this.$dialog
        .confirm({
          message: "是否退出智能核保助手？",
          confirmButtonText: "确定", // 设置确认按钮的文字
          confirmButtonColor: "#e60012", // 设置确认按钮的文字颜色
          cancelButtonColor: "#e60012", // 设置取消按钮的文字颜色
        })
        .then(() => {
          console.log("点击了确定，弹窗关闭");
          console.log('回到信易通首页');
            var data = {
              //sessionTimeOut : sessionTimeOutFlag //"Yes" Session超时 "No":系统正常的返回
              sessionTimeOut: 'No', //"Yes" Session超时 "No":系统正常的返回
              exitSysPage: "2" //"1" 信易通首页  "2":“我”页面
            };
            setTimeout(function () {
              cordova.sino.entryLocalSys(function () { }, data);
            }, 350);
        })
        .catch(() => {
          console.log("点击了取消，弹窗关闭");
        });
    },
  },
};
</script>

<style scoped>
.suggestbox {
  height: 200px;
  overflow: auto; /* 让内容超出容器尺寸时显示滚动条 */
}

.header-timer {
  text-align: right;
  margin-top: 2vh;
  margin-right: 4vw;
  font-size: 14px;
  color: #b7bfc1;
}
.contents .suggestbox {
  background-color: #fff;
  margin-top: 10px;
  padding: 20px;
  text-align: left;
  color: #999;
}

.contents .suggestbox .contentbox {
  margin-bottom: 20px;
}

.contents .suggestbox .title {
  margin-bottom: 6px;
}
.contents .suggestbox .contentbox p {
  margin: 4px 0;
}

.contents .suggestbox .contentbox .result {
  font-weight: 600;
}

.contents .suggestbox .contentbox .health {
  color: #82bc34;
  font-weight: 600;
}

.contents .suggestbox .contentbox .cenleft {
  margin-left: 20px;
  font-size: 14px;
}

.contents .suggestbox .end {
  text-align: left;
  /* color: #999; */
  color: #e60012;
  font-size: 14px;
  margin: -10px 0 15px 0;
}

.countbox {
  margin: 10px 0px;
  text-align: left;
  padding: 4px;
  color: #d4b882;
  background-color: #fff9e7;
}

.countbox span {
  padding: 6px;
}

.cardbox {
  margin: 15px auto;
  text-align: left;
  padding: 15px;
  background-color: #fff;
}

.contents .projectBox {
  font-weight: 600;
  background-color: #fff;
}

.contents .helSuggest {
  font-size: 14px;
  padding: 20px;
  background-color: #f2f2f2;
}

.contents .helSuggest p {
  font-size: 14px;
}

/* .cardbox div{
    display: flex;
    color: #999;
    margin: 15px auto;
  } */

.cardbox .p1 {
  font-size: 14px;
  flex: 0.5;
}
.cardbox .p2 {
  font-size: 14px;
  flex: 2;
}

.btnbox {
  margin-top: 50px;
  display: flex;
  margin: 0 auto;
  justify-content: space-around;
}

.btnbox div {
  bottom: 20px;
  overflow: hidden;
}

.btnbox .btn1 {
  width: 166px;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  border: 1px solid #eb3433;
  color: #eb3433;
  border-radius: 6px;
  position: fixed;
  left: 12px;
}

.btnbox .btn2 {
  width: 166px;
  height: 40px;
  line-height: 40px;
  background-color: #eb3433;
  border: 1px solid #eb3433;
  color: #fff;
  border-radius: 6px;
  margin-bottom: 50px;
  position: fixed;
  right: 12px;
  bottom: -30px;
}

/* .contents .btn1{
    width: 180px;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    border: 1px solid #eb3433;
    color: #eb3433;
    border-radius: 6px;;
  }

  .contents .btn2{
    width: 180px;
    height: 40px;
    line-height: 40px;
    background-color: #eb3433;
    border: 1px solid #eb3433;
    color: #fff;
    border-radius: 6px;
    margin-bottom: 50px;
  } */
</style>
